<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侯雪磊的个人网站</title>
    <link rel="stylesheet" href="css/hearder.css">
    <link rel="stylesheet" href="css/about.css">
    <link rel="stylesheet" href="css/skills.css">
    <link rel="stylesheet" href="css/kamanrider.css">
    <link rel="stylesheet" href="css/jingli.css">
    <link rel="stylesheet" href="css/lianxi.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2112419_3l9bndq82l1.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>

<body>
    <div class="header">
        <div class="nav">
            <div>
                <div class="nav-left">侯雪磊的个人网站</div>
                <div class="nav-right">
                    <ul>
                        <li class="nav-xinxi">信息</li>
                        <li class="nav-skills">技能</li>
                        <li class="nav-kamanrider">图片</li>
                        <li class="nav-jingli">经历</li>
                        <li class="nav-lianxi">联系</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="touxiang"></div>
            <h1>侯雪磊</h1>
            <p>2017级计算机科学与技术一班，一个路过的假面骑士</p>
            <div class="nav-btn">
                <button class="left-btn">私信</button>
                <button class="right-btn">关注</button>
            </div>
        </div>
    </div>

    <div class="baise">
        <div class="about">
            <div class="left-about">
                <h2>关于</h2>
                <p>你好！我是侯雪磊。Web开发人员，一个路过的假面骑士。</p>
                <p>假面骑士现划分为昭和骑士、平成骑士和令和骑士三大类。自首作《假面骑士》到《假面骑士J》，都是有关进行改造手术的改造人与邪恶组织对抗的故事，他们被归类为昭和骑士。而由《假面骑士空我》至《假面骑士Zi-O》登场的假面骑士，被归类为平成骑士。从《假面骑士Zero-One》起登场的假面骑士被归类为令和骑士。
                </p>
            </div>
            <div class="right-about">
                <h2>基本信息</h2>
                <ul>
                    <li>年龄</li>
                    <li>电子邮件</li>
                    <li>电话</li>
                    <li>地址</li>
                    <li>职业</li>
                </ul>
                <ul>
                    <li>22</li>
                    <li>873124602@qq.com</li>
                    <li>873124602</li>
                    <li>六安市金寨县天堂寨</li>
                    <li>学生，假面骑士</li>
                </ul>
            </div>
        </div>

        <div class="skills">
            <h2>专业技能</h2>
            <div class="biaoge">
                <ul>
                    <li class="skills-li">
                        <div class="before">
                            <span>HTML</span>
                            <span>80%</span>
                            <div class="qianse">
                                <div class="shense1"></div>
                            </div>
                        </div>
                    </li>
                    <li class="skills-li">
                        <div class="before">
                            <span>CSS</span>
                            <span>75%</span>
                            <div class="qianse">
                                <div class="shense2"></div>
                            </div>
                        </div>
                    </li>
                    <li class="skills-li">
                        <div class="before">
                            <span>JAVASCRIPT</span>
                            <span>30%</span>
                            <div class="qianse">
                                <div class="shense3"></div>
                            </div>
                        </div>
                    </li>
                    <li class="skills-li">
                        <div class="before">
                            <span>BOOTSTRAP</span>
                            <span>50%</span>
                            <div class="qianse">
                                <div class="shense4"></div>
                            </div>
                        </div>
                    </li>
                    <li class="skills-li">
                        <div class="before">
                            <span>PHOTOSHOP</span>
                            <span>70%</span>
                            <div class="qianse">
                                <div class="shense5"></div>
                            </div>
                        </div>
                    </li>
                    <li class="skills-li">
                        <div class="before">
                            <span>RIDER KICK</span>
                            <span>100%</span>
                            <div class="qianse">
                                <div class="shense6"></div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="kamanrider">
            <h2>kamanrider</h2>
            <div class="qishitu">
                <div class="swiper">
                    <div class="swiper-content">

                        <div class="current"></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>


                    </div>
                    <button id="prev"><i class="iconfont icon-xiangzuo"></i></button>
                    <button id="next"><i class="iconfont icon-xiangyou"></i></button>
                    <div id="btns">

                        <div class="current">
                            <h1>假面骑士空我</h1>
                            <p>2000年。在长野山中的九郎岳，正在进行某座神秘遗迹的挖掘工作，遗迹内的一具棺木中藏有一个佩戴石化腰带的古尸。
                                孰不知当调查团将棺木开启时，亦因此唤醒了它的死敌“古朗基”。调查团立即遭到未确认生命体的袭击而全数死亡。而
                                在为了查出调查团被杀案件的线索，正在遗迹现场调查中的长野县刑警一条薰面前，有一名青年突然擅自闯入。这名被
                                一条拦下的青年，他自称为冒险家五代雄介。</p>
                            <p> 终于复活的未确认生命体在长野近郊出现，并开始袭击人们，甚至一路冲进警局。在场的雄介感应到从遗迹出土，由警
                                方保管的腰带状遗物所传来的战士形象，在腰带的感召与冒险家的直觉下将之装着于腰部。雄介的身体也随之覆上一层
                                强化肌肉，变身后的雄介与袭击警局的未确认生命体经过一场苦战后终于将其击倒。</p>
                            <p>随着未确认生命体不断出现于大城市东京，五代雄介下定决心为了让周遭的人们免于恐惧，守护他们的笑容而战……新一
                                代假面骑士“空我”诞生！</p>
                        </div>

                        <div>
                            <h1>假面骑士AgitΩ</h1>
                            <p>《假面骑士AgitΩ》（仮面ライダーアギト/Masked Rider AgitΩ）是继空我之后，平成的第2作假面骑士，同时也是假面
                                骑士诞生30周年的纪念作品。</p>
                            <p>故事发生在《假面骑士空我》的两年后，描述了人类、AgitΩ与“神”的故事。（虽然世界观与空我一样，但是剧情没有直接关联）</p>
                            <p>除了继承空我变身和形态转换要素的假面骑士AgitΩ外，该剧还突破性地加入了装着人造装甲的假面骑士G3以及狂野的假面骑士Gills，
                                在故事后期还加入了带有昭和骑士色彩的骑士假面骑士Another AgitΩ。</p>
                            <p>在日本，AgitΩ的收视率是平成假面骑士中最高的。 </p>
                        </div>

                        <div>
                            <h1>假面骑士龙骑</h1>
                            <p>《假面骑士龙骑》（原文：仮面ライダー龙骑/Masked Rider Ryuki）是平成假面骑士系列的第3部作品，宣传标语为“不战斗的话就无法生存下去”。</p>
                            <p>龙骑的故事以镜为主题——正如剧中所说：“镜子可映照出人的本性”，假面骑士也不例外。</p>
                            <p>在镜的“映照”下，骑士已经不等于是正义（英雄）的代名词了。</p>
                            <p>在本作中每一个骑士均为了自己的愿望，为了自己所谓的“正义”而与其他骑士战斗，有时更会做出令人发指的事。</p>
                            <p>《假面骑士龙骑》是首部以卡片变身的骑士作品，不但加入了很多新元素，而且连片中的假面骑士多达13位。</p>
                        </div>

                        <div>
                            <h1>假面骑士555</h1>
                            <p>《假面骑士555》（原文：仮面ライダー555（ファイズ）/Masked Rider Φ's）是继《假面骑士龙骑》之后，又一部新的假面骑士
                                作品诞生，平成假面骑士的第4部作品，是假面骑士颠覆之作！这次的骑士命名为“Faiz”，该系列的骑士会采用装甲化的形式，造型
                                采用“鲨鱼”光滑的质感以及鳍的触角。本作首次出现怪人系主角。</p>
                            <p>没有梦想的青年·乾巧在旅行的途中，遇到了拥有特殊的变身工具“Faiz设备”的少女·园田真理。以被异形怪人“奥尔菲诺”袭击为契机，作为假面骑
                                士Faiz开始战斗……。围绕着腰带的争斗。与一边作为奥尔菲诺复活，一边又打算作为人活着的青年·木场勇治的相遇。虽然卷入了恶意所产生的陷阱
                                与对立之中，巧作为人类，作为Faiz，为了守护某人的梦想而投身于的战斗中。</p>
                        </div>

                        <div>
                            <h1>假面骑士剑</h1>
                            <p>《假面骑士剑》（原文：仮面ライダー剣/Masked Rider ♠）是平成假面骑士系列的第五部作品，继《假面骑士555》
                                之后的一作。本次作品各假面骑士的设定都回归到以昆虫为蓝本，并且以扑克牌的花色为记号。消灭怪人以封印的形式
                                将其封印至卡片内，并使用怪人的招数。主题标语是“此刻，让力量尽数释放吧。”和“掌握住命运的王牌！”。</p>
                            <p>故事的主角剑崎一真使用他所属组织BOARD（人类基盘史研究所）制造的“骑士系统”，通过用非人造假面骑士系统刷红心
                                A变身成为假面骑士的Chalice，其他用人造假面骑士系统变身的Garren（第一个被制造）、Blade（第二个被制造）和
                                Leangle（由被孔雀不死兽控制的乌丸所长制造）。</p>
                            <p>假面骑士的敌人是不死兽（Undead），相当于生物始祖的存在。正如其名，不死兽不老不死，因此只有封印才能暂时遏
                                止它们的行动。不死兽分为黑桃、方块、红心、梅花的四花色，再从A到K分成13类别，再加上Joker，总共存在53只。
                                不死兽彼此之间进行着生死混战，没被封印活到最后的不死兽所代表的物种，将在地球上世代繁荣。上一次在一万年前
                                进行的不死兽战争（又称Battle Fight，极限战争），属于人类始祖的人类不死兽赢得最后的胜利，所以人类才能在地
                                球上繁衍得欣欣向荣。</p>
                        </div>

                        <div>
                            <h1>假面骑士响鬼</h1>
                            <p>《假面骑士响鬼》（原文：仮面ライダー响鬼/Masked Rider Hibiki）为平成假面骑士系列第6作，是东映的新一代特摄
                                作品。本片的假面骑士不再以昆虫或动物为原型，而是使用了日本最传统的传说“鬼”，但保留了部分昭和骑士的造型特点，
                                叙事风格类似于平成骑士第一作《假面骑士空我》。</p>
                            <p>安达明日梦是初三的学生，在考学和理想中迷茫不已，在他跟随母亲回老家参加法事的途中遇见了一个神秘的男子。他以
                                不可思议的手法救了一名小孩而引起了安达明日梦的注意。从而安达以一个普通孩子的身份渐渐介入了一个他完全不知道
                                的世界之中……这就是鬼之战士们的世界……究竟在这里他会遇见什么样的人，什么样的事情，对安达明日梦的生活会有什么样的影响呢……</p>
                        </div>

                        <div>
                            <h1>假面骑士kabuto</h1>
                            <p>《假面骑士Kabuto》（原文：仮面ライダーカブト/Masked Rider Kabuto），平成骑士系列的第7弹，也是假面骑士诞生35周年作品。
                                由于是纪念作，所以再次采用昆虫造型（巨型甲虫角日语KABUTOMUSHI）的设计，配合如《假面骑士555》般充满金属机械感，当中新
                                颖的战斗场面采用了有如Matrix的拍摄手法，大量CG增加了速度感及观感。超速战斗成为了本作的卖点，骑士和怪人能在超高速形态下战斗！</p>
                        </div>

                        <div>
                            <h1>假面骑士电王</h1>
                            <p>《假面骑士电王》（原文：仮面ライダー电王/Masked Rider Den-O）的TV版从2007年1月28日-2008年1月20日于朝日电视台放映，共49话。
                                由于其高人气因此作品亦有相关多部剧场版推出。《假面骑士电王》的放映开始日是原作者石森章太郎的第九个忌辰，也是平成骑士系列第8作。
                                宣传口号是「超越“时刻”，我、登场！」及「时间的列车电班列，下一站是过去还是未来？」。</p>
                            <p>平成系列中很多作品骑士与怪人的原型都是统一是生物，但本作采用的是电车铁道，童话等以往都没采用的崭新要素。而人物方面本作塑造出史上倒
                                霉的主人公：野上良太郎（佐藤健饰），也加入了“主人公通过异魔神的凭依变成各种不同性格”这要素。而对比以往复杂的剧情来说，这次故事相
                                对要简单明快很多，此外主演佐藤健一人分饰多角的惊人演技更深得大众的认同。</p>
                        </div>

                        <div>
                            <h1>假面骑士kiva</h1>
                            <p>《假面骑士Kiva》（原文：仮面ライダーキバ/Masked Rider Kiva）是于2008年开播的平成假面骑士系列第9作。继承着《假面骑士电王》穿梭于
                                时间线的这一特色。以1986年和2008年两个时间点来展开链条时间线索，围绕着父子两人的故事发展。此片在感情方面较为细腻。另外，假面骑士
                                Kiva的脸部造型取自“蝙蝠”和“万圣节的南瓜灯”</p>
                            <p>故事关于主角红渡与父亲红音也两个世代的人的故事，播放形式从1986及2008年时间旅行，给观众一种全新体验。值得一提的是，今次Kiva同样具
                                有四种不同形态（包括吸血鬼，狼人，半鱼人及科学怪人）。而且今次的变身腰带罕有地是主角的拍挡。腰带附有六个笛子。分别可令Kiva使出必
                                杀技，转换形态，召唤城堡及强化摩托车。另一名和Kiva相对的假面骑士Ixa的腰带亦附有六个笛子的芯片，不但有着抢夺Kiva武器的能力，更可
                                令Ixa使出必杀技及召唤机械兽。而今次Kiva要面对的敌人是以活人的生命能量为食粮的牙血鬼。</p>
                        </div>

                        <div>
                            <h1>假面骑士decade</h1>
                            <p>《假面骑士Decade》（原文：仮面ライダーディケイド/Masked Rider DCD）从2009年1月25日起于朝日电视台放映，每周日早上8:00-8:30播出。
                                制作此特摄片的东映为新的主角假面骑士命名为Decade，取其“十年”之意，以纪念平成假面骑士系列踏入第10作。从正面看Decade身体的右上方就
                                是一个“十”字。本片讲述能变身为假面骑士Decade的门矢士旅行至各个骑士的世界，为了寻找自己的世界而一直旅行。</p>
                            <p>这是一部“关于假面骑士的假面骑士”，也就是一部后设假面骑士。Decade的故事以穿越时空为主轴，故空我、AgitΩ、龙骑、555、剑、响鬼、Kabuto、
                                电王、Kiva等几部作品的假面骑士亦会于本剧内出现，成为本剧集卖点之一。</p>
                        </div>

                        <div>
                            <h1>假面骑士w</h1>
                            <p>舞台是有着巨大风车的都市——风都。</p>
                            <p>风都的街上不断传出名为掺杂体（Dopant）的怪人作乱的怪异事件。</p>
                            <p>为了维护风都的和平，私家侦探左翔太郎和他拥有全球资料信息的大脑的同伴菲利普一同以地球内存变身为假面骑士W，和接连出现的掺杂体（Dopant）
                                战斗！</p>
                        </div>

                        <div>
                            <h1>假面骑士ooo</h1>
                            <p>美术馆仓库内的一副石棺因为意外而打开，被封印了800年的“欲望使”因此而复活。复活后的欲望使力量并不完全，所以他们以组成身体的硬币制造出
                                “阴暗使”。阴暗使通过吸食人类欲望而成长，同时体内的硬币也会增加。欲望使以此收集硬币。 偶然卷入复活事件的无理想、无欲望青年火野映司，
                                因为自身的正义感而与阴暗使战斗。而五个欲望使之一的安库，因为硬币的不足而导致除右手外都不能变身。安库看中了映司单纯的性格，于是把OOO
                                驱动器交给映司，让映司变身为假面骑士OOO消灭阴暗使，自己从中获得硬币。假面骑士OOO的战斗到底会如何？安库能否重新获得身体？同时，与欲
                                望使有莫大关系的“鸿上基金会”的目的又是什么？带着众多谜团，假面骑士OOO的故事开始了……</p>
                            <p>欲望：本作主要面对的敌人是“人类的欲望”。各种人类的欲望都被怪人当作他们的食物。</p>
                            <p>硬币：欲望使透过吸取人类的欲望可以制作出硬币。而骑士将欲望使和阴暗使打倒就会掉出硬币。 </p>
                            <p>内裤：主角将会有莫名执着的内裤时尚，尤其喜爱花样繁多且颜色艳丽的内裤，可以说是主角未来的希望。</p>
                        </div>

                        <div>
                            <h1>假面骑士fourze</h1>
                            <p>本作主人公为高中生，也是假面骑士史上年龄较小的骑士，口头禅为“宇宙来了”。假面骑士系列第一次以高中学园作为背景，以高中生作为主角。</p>
                            <p>主角（如月弦太朗）是转校生，飞机头，梦想是「与学校的所有人成为朋友」的热血少年。遇到拥有神秘“开关”和月球基地的同班同学（歌星贤吾）。
                                正是二人的相遇，促使假面骑士Fourze诞生！青春极盛时期的高中生活。弦太朗创立「假面骑士部」，在宇宙与学园的舞台上，与朋友们一起成长的，
                                既痛苦又快乐的青春。</p>
                        </div>

                        <div>
                            <h1>假面骑士wizard</h1>
                            <p>日本特摄剧《假面骑士Wizard》中登场的主角假面骑士。战斗时口头禅为：“来吧！Show Time了”。打败对方前会说：“Finale了”。使用魔法戒指变身的
                                假面骑士，剧中称呼其为“指环的魔法师”。此外还有他人所变身的版本。</p>
                        </div>

                        <div>
                            <h1>假面骑士铠武</h1>
                            <p>平成假面骑士第15部作品，新英雄的主题是“水果”与“铠甲”！！身披宿有“异世界果实”之力的铠甲。目标直指天下第一的多位假面骑士纷纷登场！！
                                假面骑士的战国时代，开幕！</p>
                            <p>由大型企业“世界树财团”所发展新兴的都市“泽芽市”之中，一些终日以跳街舞度日的青少年，从异世界召唤称为“异域者（Inves）”的小型怪物并进行
                                互相对战的游戏为乐。却与异世界相通的道路因此打开了，招来更强大的怪物入侵现实世界而令人类陷入危机。男主角葛叶纮汰为某种意向而站出来成
                                为假面骑士铠武，卷入假面骑士之间争雄的命运。</p>
                        </div>

                        <div>
                            <h1>假面骑士drive</h1>
                            <p>2014年4月8日的晚上，全世界频繁爆发令所有的人类和物质变得静止的怪异现象“浑浊”，由人工生命体机械变异体所引发并作出大规模破坏行动，事
                                件后期被称之为“全球冻结”。</p>
                            <p>半年后，警视厅内部成立了部门特状课，负责调查与后期称之为“重加速”的现象有关特别案件，而特状课有一位曾经在“全球冻结”事件中造成了阴霾
                                而变得散漫的青年刑警泊进之介，偶然与设置于跑车赛特朗内会说话的腰带相遇。</p>
                            <p>在发生新一度和“重加速”有关的事件之中，使用腰带变身成为假面骑士Drive与引发事件的怪物战斗。</p>
                        </div>

                        <div>
                            <h1>假面骑士ghost</h1>
                            <p>一心想成为幽灵猎人的天空寺尊于18岁生日时，收到来自十年前亡父生前所寄的幽灵眼魂（Ghost Eyecon）后，来自异世界的怪人——眼魔突如其来地
                                出现在面前并盯上此物，甚至为救青梅竹马月村明里和御成而身亡。得到仙人的帮助之下而获得Ghost驱动器变身，成为假面骑士Ghost并得以九十九
                                日短暂的生命复苏。为收集实现复活愿望的「15位伟人」眼魂，投身于影响世界命运的战斗中。</p>
                        </div>

                        <div>
                            <h1>假面骑士ex-aid</h1>
                            <p>2016年，由于开始侵蚀世界的怪人崩源体=未知的电脑游戏病毒侵蚀开始。为了救助感染者，决定与崩源体战斗的天才玩家宝生永梦变身为假面骑士Ex-Aid。
                                “各种游戏类型的骑士们出现！Game Start！熟玩众多的游戏，将崩源体根绝吧！</p>
                        </div>

                        <div>
                            <h1>假面骑士build</h1>
                            <p>「来吧，开始实验吧。」</p>
                            <p>行星探测船从火星带回的神秘之箱“潘多拉魔盒”。</p>
                            <p>从箱中释放出来的能量制造出了巨大的墙壁，日本被分成了三部分。</p>
                            <p>至此10年后。在谜之怪人“猛击者”暗中活动在东都街头，传说存在着为了保护人们而战斗的假面骑士Build。</p>
                            <p>那个真身是丧失记忆的天才物理学家·桐生战兔。解开潘多拉魔盒之谜，取回自己的记忆的战斗至此拉开了序幕。</p>
                        </div>

                        <div>
                            <h1>假面骑士zi-o</h1>
                            <p>《假面骑士Zi-O》（原文：仮面ライダージオウ/Kamen Rider Zi-O）是2018年播出的日本特摄电视剧，也是“平成假面骑士”系列第20作，是“平成假面骑士”
                                20周年的完结作品。Zi-O使用变身腰带“时空驱动器”，并装上变身道具“驾驭表头”变身。而且，能透过获得蕴藏着历代平成假面骑士力量的驾驭表头，将其
                                力量解放，便能够穿上各平成骑士的装甲。这样，能够使用全部平成假面骑士力量的Zi-O，是拥有从2000年开始“平成假面骑士”20部作品力量的超级英雄。
                                自此，平成最后一位假面骑士的故事开始了。</p>
                            <p>“我来自2068年。未来的世界被魔王统治，人们受尽痛苦，创造了一个没有希望的世界。”</p>
                            <p>“未来的你正是，总归会成为毁灭世界的魔王，时之王者‘Zi-O’。”</p>
                            <p>命中注定要变身为假面骑士Zi-O的主人公，他真的不是英雄并会变成未来的魔王吗…到底未来的命运会怎样？</p>
                            <p>这是一个穿越时空，与历代平成假面骑士们相遇同时，过去·现在·未来、为了拯救所有时间而战，成为次代之王的假面骑士故事。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            let index = 0;
            $("#next").click(function () {
                index++;
                console.log(index)
                if (index > 19) {
                    index = 0;
                }
                animate(1000)
            })

            $("#prev").click(function () {
                index--;
                if (index < 0) {
                    index = 19;
                }
                animate(1000)
            })
            function animate(speed) {
                $(".swiper-content div").eq(index).fadeIn(speed).siblings().fadeOut(speed)
                $("#btns div").eq(index).fadeIn(speed).siblings().fadeOut(speed)
            }
        </script>

        <div class="jingli">
            <h2>个人经历</h2>
            <div class="jingli-text">
                <div class="jingli-left">
                    计算机协会会长
                </div>
                <div class="jingli-right">
                    计算机协会是由从事计算机及相关科学技术领域的科研、教育、开发、生产、管理、应用和服务的个人及单位自愿结成、依法登记成立的全国性、学术性、非营利学术团体，是中国科学技术协会成员。
                </div>
                <div class="jingli-left">
                    淮北锐思特网络科技有限责任公司<br>董事长
                </div>
                <div class="jingli-right">
                    董事长（英语：Chairman of the
                    board，简称：Chairman，日韩称会长），又被翻译成董事会主席。指的是一家公司的最高领导者，统领董事会。董事长也是董事之一，由董事会选出，其代表董事会领导公司的方向与策略。
                </div>
                <div class="jingli-left">
                    假面骑士
                </div>
                <div class="jingli-right">
                    只要铭记于心，骑士就永远存在，我是行天之道，总司一切的男人
                </div>
            </div>
        </div>

        <div class="lianxi">
            <div class="ditu">
                <h2>我在哪？</h2>
                <iframe src="https://map.baidu.com/"></iframe>
            </div>
            <div class="liuyan">
                <h1>留言板</h1>
                <textarea>请给我留言吧</textarea>
                <input type="text" placeholder="@mail.com">
                <input type="submit" value="发送" />
            </div>
        </div>

    </div>
    <div class="footer">
        <h2>Created By Hou Xuelei</h2>
        <h3>CopyRight@2020.Company name All rights reserved</h3>
    </div>
    <div class="gundong-btn">
        <i class="iconfont icon-xiangshangzhanhang"></i>
    </div>


    <script>
        //对窗口执行滚动监听事件$(window).scroll()
        //获取滚动条距离顶部height  $(window).scrollTop()
        //1.窗口执行滚动监听事件，获取滚动条距离顶部
        //2.当滚动条距离顶部的高度大于等于200px,opacity=1;
        $(window).scroll(function () {
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop)
            opacity = scrollTop / 200;

            if (scrollTop >= 200) {
                opacity = 1;
            }
            $(".gundong-btn").css({ opacity: opacity })
        })
        $(".gundong-btn").click(function () {
            $("html").animate({ scrollTop: "0px" }, 1000)
        })
    </script>

    <script>
        $(function () {
            $('.nav-left').click(function () {
                $('html,body').animate({ scrollTop: 0 }, 1000);
            })
        })
        $(function () {
            var xinxiTop = $('.about').offset().top - 100;
            $('.nav-xinxi').click(function () {
                $('html,body').animate({ scrollTop: xinxiTop }, 500);
            })
        })
        $(function () {
            var skillsTop = $('.skills').offset().top - 100;
            $('.nav-skills').click(function () {
                $('html,body').animate({ scrollTop: skillsTop }, 500);
            })
        })
        $(function () {
            var kamanriderTop = $('.kamanrider').offset().top - 100;
            $('.nav-kamanrider').click(function () {
                $('html,body').animate({ scrollTop: kamanriderTop }, 500);
            })
        })
        $(function () {
            var jingliTop = $('.jingli').offset().top - 100;
            $('.nav-jingli').click(function () {
                $('html,body').animate({ scrollTop: jingliTop }, 500);
            })
        })
        $(function () {
            var lianxiTop = $('.lianxi').offset().top - 100;
            $('.nav-lianxi').click(function () {
                $('html,body').animate({ scrollTop: lianxiTop }, 500);
            })
        })
    </script>
</body>

</html>